<template>
  <div class="app-container">
    <router-link to="permission/create">
      <el-button type="success" size="small"><i class="el-icon-plus" /> 新增权限</el-button>
    </router-link>

    <el-card class="tree_table">
      <tree-table v-loading="listLoading" :data="permissions" element-loading-text="Loading" :columns="columns" :selection-type="false" :expand-type="false" :is-fold="false" show-index index-text="#" border>
        <template slot="name" slot-scope="scope">
          <span v-if="scope.row.name">{{ scope.row.name }}</span>
          <span v-else>无</span>
        </template>
        <template slot="path" slot-scope="scope">
          <span v-if="scope.row.path">{{ scope.row.path }}</span>
          <span v-else>无</span>
        </template>
        <template slot="icon" slot-scope="scope">
          <span v-if="scope.row.icon">{{ scope.row.icon }}</span>
          <span v-else>无</span>
        </template>
        <template slot="router" slot-scope="scope">
          <span v-if="scope.row.router">是</span>
          <span v-else>否</span>
        </template>
        <template slot="method" slot-scope="scope">
          <span v-if="scope.row.method">{{ scope.row.method }}</span>
          <span v-else>无</span>
        </template>
        <template slot="api" slot-scope="scope">
          <span v-if="scope.row.api">{{ scope.row.api }}</span>
          <span v-else>无</span>
        </template>
        <template slot="level" slot-scope="scope">
          <el-tag v-if="scope.row.level === 1" type="primary">一级</el-tag>
          <el-tag v-else-if="scope.row.level === 2" type="success">二级</el-tag>
          <el-tag v-else type="warning">三级</el-tag>
        </template>
        <template slot="sort" slot-scope="scope">
          <el-input v-model="scope.row.sort" @change="changeSort(scope.row)" />
        </template>
        <template slot="option" slot-scope="scope">
          <router-link :to="{ name: 'PermissionEdit', params: { id: scope.row.id }}">
            <el-button size="mini" type="primary">编辑</el-button>
          </router-link>
          <el-button id="del_one" size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </tree-table>
    </el-card>
  </div>
</template>

<script>
import { fetchPermissionList, ChangeSortPermission, deletePermission } from '@/api/permission'

export default {
  data() {
    return {
      permissions: [],
      listLoading: true,
      columns: [
        {
          label: '权限名称',
          prop: 'title'
        },
        {
          label: '路由名称',
          type: 'template',
          template: 'name'
        },
        {
          label: '访问路径',
          type: 'template',
          template: 'path'
        },
        {
          label: '图标',
          type: 'template',
          template: 'icon'
        },
        {
          label: '路由设置',
          type: 'template',
          template: 'router'
        },
        {
          label: '请求方法',
          type: 'template',
          template: 'method'
        },
        {
          label: '请求接口',
          type: 'template',
          width: '220px',
          template: 'api'
        },
        {
          label: '权限等级',
          type: 'template',
          template: 'level'
        },
        {
          label: '排序',
          type: 'template',
          template: 'sort'
        },
        {
          label: '操作',
          type: 'template',
          template: 'option'
        }
      ]
    }
  },
  created() {
    this.init()
  },
  methods: {
    async init() {
      this.listLoading = true
      const res = await fetchPermissionList()
      if (res.code !== 20000) return this.$message.error(res.message)
      this.permissions = res.data.permissions
      this.listLoading = false
    },
    load(tree, treeNode, resolve) {
      setTimeout(() => {
        resolve()
      }, 1000)
    },
    changeSort(row) {
      ChangeSortPermission(row.id, { sort: row.sort }).then((res) => {
        if (res.code === 20000) {
          this.init()
          return this.$message.success(res.message)
        }
        return this.$message.error(res.message)
      })
    },
    handleDelete(row) {
      this.$confirm('此操作将永久删除该权限菜单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        deletePermission(row.id).then((res) => {
          if (res.code === 20000) {
            this.init()
            this.$message({
              type: 'success',
              message: res.message
            })
          } else {
            this.$message({
              type: 'info',
              message: res.message
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style scoped>
.tree_table {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
  margin-top: 15px;
}

.thumb {
  width: 80px;
  height: 60px;
}

#del_one{
  margin-left: 10px;
}
</style>

